<template>
  <div>
    <div v-if="isDesigner" style="width: 100%;height: 70px; text-align: center;">
      <img src="./img.svg" alt="" style="height: 70px;">
    </div>
      <flowchart
      v-else
        v-loading="v_flowMapMounted === false"
        mode="instance"
        :process-inst="v_flowMapMounted ? v_processInst : {}"
      ></flowchart>
    </div>
</template>
<script>
import flowchart from "ide/flowchart"
// import customRequest from "../../mixins/custom-request.js"

export default {
  components: { flowchart },
  // mixins: [customRequest],
  props: {
    value: '',
     mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    processInstId: {
      type: String,
      default: null
    },
    processInstObj: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      v_processInst: null,
      v_flowMapMounted: false,
    }
  },
  watch: {
      processInstObj: {
        immediate: false,
        deep: true,
        handler(val) {
          if (val) {
            console.log("watch组件流程图数据:", val)
            this.processInst = val
            this.v_flowMapMounted = true
          }
        },
      },
    },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    dispatchProxy(){
      if (Vue.prototype.dispatchProxy) {
        return Vue.prototype.dispatchProxy(this)
      } else {
        return this.dispatch
      }
    },
  },
  mounted() {
    if (!this.isDesigner) {
    this.v_getProcessGraph()
    }
  },
  methods: {
    async v_getProcessGraph() {
      if (this.processInstObj) {
        this.processInst = this.processInstObj
        this.v_flowMapMounted = true
      } else if (this.processInstId) {
        const query = { processInstID: this.processInstId }
        const resp = await this.dispatchProxy(Vue.prototype.Controllers.BfpComponentController.getProcessGraph, query)
        if (!resp.error) {
          const { data } = resp
          this.v_processInst = data.data
          this.v_flowMapMounted = true
        }
      } else {
        this.$message.warning('请配置正确的流程参数')
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
